<template>
  <div class="home">
    <!-- 导航栏 -->
    <van-nav-bar>
      <!-- 自定义左侧 -->
      <template #left>
        <div class="logo"></div>
      </template>
      <!-- 自定义右侧 -->
      <template #right>
        <van-button class="search-btn" round icon="search">搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- 频道栏 -->
    <!-- v-model用来获取被选中的频道下标 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in ownList" :key="item.id" :title="item.name">
        <article-list :channel_id="item.id" />
      </van-tab>

      <div class="icon-box">
        <van-icon @click="chanShow = true" name="wap-nav" />

        <!--频道管理 -->
        <van-action-sheet v-model="chanShow" title="标题">
          <channels
            :ownChannels="ownList"
            :allChannels="allList"
            :value="active"
            @input="active = $event"
            @close="chanShow = false"
          />
        </van-action-sheet>
      </div>
    </van-tabs>
  </div>
</template>

<script>
import articleList from "./articleList.vue";
import { ownChannelsAPI, allChannelsAPI } from "@/api";
import channels from "@/views/home/channels";
import { getChannels } from "@/utils/storage";
export default {
  components: {
    articleList,
    channels,
  },
  data() {
    return {
      active: 0,
      ownList: [],
      allList: [],
      chanShow: false,
    };
  },
  async created() {
    // if (this.$store.state.tokenObj.token) {
    //   //获取用户自己的频道
    //   let res = await ownChannelsAPI();
    //   // console.log(res);
    //   this.ownList = res.data.data.channels;
    // } else {
    //   let res = getChannels();
    //   if (res) {
    //     this.ownList = res;
    //   } else {
    //     let res = await ownChannelsAPI();
    //     // console.log(res);
    //     this.ownList = res.data.data.channels;
    //   }
    // }
    let local = getChannels();
    if (this.$store.state.tokenObj.token || !local) {
      let res = await ownChannelsAPI();
      this.ownList = res.data.data.channels;
    } else {
      this.ownList = local;
    }
    //获取所有频道
    let res1 = await allChannelsAPI();
    this.allList = res1.data.data.channels;
  },
};
</script>

<style lang="less" scoped>
.home {
  .logo {
    width: 130px;
    height: 100%;
    // 在vue-cli4的时代,这里用@符号不会代表src
    // 所以在@符号前面加 ~ 号才能代表src
    background: url(~@/assets/logo.png) no-repeat center / contain;
  }

  .search-btn {
    width: 90px;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    .van-icon {
      color: #fff;
    }
  }
}

.van-tabs {
  position: relative;
  ::v-deep .van-tabs__wrap {
    width: 345px;
  }

  .icon-box {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;

    .van-icon-wap-nav {
      font-size: 24px;
    }
  }
}
</style>
